<template>
  <el-form label-width="100px" :model="formData" :rules="rules" ref="formRef">
    <el-form-item label="文章标题:" prop="title">
      <el-input v-model="formData.title"></el-input>
    </el-form-item>

    <el-form-item label="答案解析:" prop="articleBody">
      <div>
        <quill-editor v-model="formData.articleBody" ></quill-editor>
      </div>
    </el-form-item>

    <el-form-item label="视频地址:">
      <el-input v-model="formData.videoURL"></el-input>
    </el-form-item>

    <el-form-item >
      <el-row type="flex" justify="end" >
        <el-button @click="$emit('clickCancel')">取消</el-button>
        <el-button type="primary" @click="submitForm">确认</el-button>
      </el-row>
    </el-form-item>
  </el-form>
</template>

<script>

//! 导入富文本编辑器
// import VueQuillEditor from 'vue-quill-editor'
 // 导入富文本编辑器的样式
// import 'quill/dist/quill.core.css'
// import 'quill/dist/quill.snow.css'
// import 'quill/dist/quill.bubble.css'
// import Vue from 'vue'
// Vue.use(VueQuillEditor) // 全局注册富文本编辑器

import { add, update } from '@/api/hmmm/articles.js'

export default {
  props: {
    curArtInfo: {
      type: Object,
      required: true
    },
    isEdit: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      formData: {
        title: '',
        articleBody: '',
        videoURL: '',
        id: ''
      },
      rules: {
        title: [
          { required: true, message: '标题输入不能为空!', trigge: 'blur' }
        ],
        articleBody: [
          { required: true, message: '内容输入不能为空!', trigge: 'blur' }
        ]
      }
    }
  },
  created () {
    // 数据回填
    if (this.curArtInfo.title && this.isEdit) {
      // 回填数据
      this.formData.title = this.curArtInfo.title
      this.formData.articleBody = this.curArtInfo.articleBody
      this.formData.videoURL = this.curArtInfo.videoURL
      this.formData.id = this.curArtInfo.id
    }
  },
  methods: {
    submitForm () {
      this.$refs.formRef.validate(async (valid) => {
        // ? 验证是否正常
        if (valid) {
          // ? 判断 是否为更新还是添加
          if (this.isEdit) {
            console.log('更新')
            await update(this.formData)
          } else {
            console.log('添加')
            await add(this.formData)
          }
          this.$message.success('操作成功了!')
          // 完成表单提交 关闭弹窗 刷新列表
          this.$emit('successSubmit')
        } else {
          this.$message.error('请按照表单内容输入!')
          return false
        }
      })
    }
  }
}
</script>

<style scoped lang='scss'>
// 富文本高度
::v-deep .quill-editor .ql-editor{
  height: 150px;
}

</style>
